<template>
  <div class="left-bar-wrapper">
    <user-name-sign :user="userNameSign" class="user-name-sign"></user-name-sign>

    <span></span>

    <ul>
      <li v-for="(category, idx) in categories" :key="idx">
        <creator-list class="creator-list" :items="category.items"
        :paths="category.paths"
        :selectIdx="computeSelectIdx(idx)"
        @changeSelectIdx="changeSelectIdx(idx, $event)">
          <i class="iconfont title-icon" :class="category.iconClass"></i>
          <h2 class="title-content">{{ category.title }}</h2>
        </creator-list>
      </li>
    </ul>
  </div>
</template>

<script>
import UserNameSign from '@c/UserCom/UserNameSign.vue';

import CreatorList from '../components/leftBar/CreatorList.vue';

  export default {
    components: {
      UserNameSign,
      CreatorList,
    },
    data() {
      return {
        categories: [
          {
            iconClass: 'icon-data1',
            title: '数据中心',
            items: [
              '基本数据',
              '内容数据',
              '粉丝数据'
            ],
            paths: [
              '/creator/data/base',
              '/creator/data/content',
              '/creator/data/fans'
            ]
          },
          {
            iconClass: 'icon-svgwrite',
            title: '内容管理',
            items: [
              '文章管理',
              '资源管理'
            ],
            paths: [
              '/creator/manage/article',
              '/creator/manage/source'
            ]
          },
        ]
      }
    },
    computed: {
      userNameSign() {
        let infos = this.$store.state.user.infos;
        return {
          name: infos.username,
          sign: infos.sign,
          avatar: infos.avatar
        }
      },
      selectIdx() {
        let path = this.$route.path;
        let paths = path.split('/').slice(1);
        let arr = [0, 0];
        if(paths[1] === 'data') {
          arr[0] = 0;
          let arr1 = ['base', 'content', 'fans'];
          if(!arr1.includes(paths[2])) arr[1] = 0;
          else arr[1] = arr1.indexOf(paths[2]);
        } else {
          arr[0] = 1;
          let arr1 = ['article', 'source'];
          if(!arr1.includes(paths[2])) arr[1] = 0;
          else arr[1] = arr1.indexOf(paths[2]);
        }

        return arr;
      }
    },
    methods: {
      computeSelectIdx(idx) {
        if(this.selectIdx[0] !== idx) return -1;
        else return this.selectIdx[1];
      },
      changeSelectIdx(categoryIdx, idx) {
        this.$router.push(this.categories[categoryIdx].paths[idx]);
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--leftBarWidth);
@lh: var(--leftBarListHeight);

.left-bar-wrapper {
  box-sizing: border-box;
  width: @w;

  padding: calc(@w * 0.04) calc(@w * 0.05);

  .user-name-sign {
    --userNmaeSignWidth: @w;
    --userNameSignHeight: calc(@lh * 2);
  }

  span {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    // background-color: var(--bgColor);
    background-image: linear-gradient(45deg, var(--blue), #00b6ff, #00ddf2, #6efacc);
    opacity: .3;
  }

  .creator-list {
    --creatorListWidth: calc(100%);
    --creatorListHeight: @lh;

    .title-icon,
    .title-content {
      &:hover {
        cursor: pointer;
      }
    }

    .title-icon {
      margin: 0 calc(@w * 0.04);
    }

    .title-content {
      font-size: calc(@lh * 0.3);
    }
  }
}
</style>